<template>
  <div class="home">
    <div class="body">
      <el-row :gutter="20">
        <el-col :span="8">
          <div class="table-w">
            <div>
                <div class="title" style="float:left">今日入库列表</div>
                <div>
                    <div style="float:right;width:100px" class="titlebtn" @click="cancelStock()">作废</div>
                </div>
            </div>
            <el-table
              :data="stockList"
              :row-style="tableRowStyle"
              :header-cell-style="tableHeaderColor"
              highlight-current-row
              @row-click="rowClick"
              :row-class-name="tableCurrentRowStyle"
              style="width: 100%;font-size:26px;"
              height="15.3rem"
            >
              <el-table-column label="序号" width="60">
                <template slot-scope="scope">{{scope.$index + 1}}</template>
              </el-table-column>
              <el-table-column prop="DesignID" label="标签" align="center"></el-table-column>
              <el-table-column prop="MaterielName" label="物料名称" align="center"></el-table-column>
              <el-table-column prop="StockCount" label="重量(克)" width="100" align="center"></el-table-column>
              <el-table-column prop="StockInt1" label="匹数" width="80" align="center"></el-table-column>
              <el-table-column prop="StockStr1" label="缸号/批号" width="100" align="center"></el-table-column>
              <el-table-column prop="StockTime" label="时间" width="100" align="center">
                  <template slot-scope="scope">
                      {{$moment(scope.row.StockTime).format('HH:mm:ss')}}
                  </template>
              </el-table-column>
            </el-table>
          </div>
        </el-col>
        <el-col :span="16">
          <div class="select-w">
            <div class="title">款式信息</div>
            <div class="top-w" v-if="orderItem.CustomFlnkID">
              <div class="select">
                <div class="tit">厂家：</div>
                <div class="des">{{orderItem.CustomerName}}</div>
              </div>
              <div class="select">
                <div class="tit">合同：</div>
                <div class="des">{{orderItem.OrderOuterCode}}</div>
              </div>
              <div class="select">
                <div class="tit">款式：</div>
                <div class="des">{{orderItem.StyleName}}</div>
              </div>
            </div>
            <div
              class="button"
              :class="orderItem.CustomFlnkID ? 'default':''"
              @click="customerToFzml()"
            >选择厂家</div>
          </div>
          <div class="block-w" v-if="detailList.length > 0">
            <div
              class="block"
              :class="item.FlnkID == selDetail ? 'active' : ''"
              v-for="(item,index) in detailList"
              :key="index"
              @click="selectDetail(item)"
            >
              <div class="title">{{item.MaterielsName}}</div>
              <div class="line">料号：{{item.MaterielsDetailCode}}</div>
              <div class="line">
                <div class="row">颜色：{{item.BomColorName}}</div>
                <div class="row">成分：{{item.MaterielComponent}}</div>
              </div>
              <div class="line">客户料号：{{item.CustomerBomID}}</div>
            </div>
          </div>
          <div class="block-w" v-if="detailList.length == 0">
            <div class="block-none">暂无相关物料</div>
          </div>
          <el-row>
            <el-col :span="16">
              <div class="info-w">
                <div
                  class="title"
                >{{matterInfo.MaterielsName || '物料名称'}}({{matterInfo.MaterielsDetailCode|| '--'}})</div>
                <div class="line">
                  <div class="row">
                    <div class="tit">客户料号：</div>
                    <div class="des">{{matterInfo.CustomerBomID}}</div>
                  </div>
                  <div class="row">
                    <div class="tit">色号：</div>
                    <div class="des">{{matterInfo.BomColorName}}</div>
                  </div>
                  <div class="row">
                    <div class="tit">成分：</div>
                    <div class="des">{{matterInfo.MaterielComponent}}</div>
                  </div>
                </div>
                <div class="line">
                  <div class="row">
                    <div class="tit">门幅：</div>
                    <div class="des">{{matterInfo.BomSpecName}}</div>
                  </div>
                  <div class="row">
                    <div class="tit">重量：</div>
                    <div class="des">{{weight}}{{matterInfo.UnitName}}</div>
                  </div>
                  <div class="row">
                    <div class="tit">克重：</div>
                    <div class="des">{{matterInfo.MaterielWeight}}/M2</div>
                  </div>
                </div>
                <div class="line">
                  <div class="row width50">
                    <div class="tit">匹数：</div>
                    <div class="des" v-if="radio == 1">{{pieceCount}}匹</div>
                    <div class="des" v-if="radio == 2 || radio == 3">
                      <el-input
                        v-model="totalPiece"
                        ref="piceCountInput"
                        placeholder="匹数"
                        style="width:140px"
                        @keyup.enter.native="makePiceCountSure()"
                      ></el-input>
                    </div>
                  </div>
                  <div class="row width50">
                    <div class="tit">缸号/批号：</div>
                    <el-input
                      v-model="cylinderNo"
                      ref="cylinderNoInput"
                      placeholder="请输入缸号/批号"
                      style="width:140px"
                      @keyup.enter.native="InStorage()"
                    ></el-input>
                  </div>
                </div>

                <div class="send-w">
                  <div class="button" v-if="selStockFlnkID" @click="print()">打印标签</div>
                  <div class="button" :class="weight ? 'default':''" @click="selectDetail()">重新称重</div>
                  <div class="button" @click="InStorage()">{{inStoraging ? '入库中':'入库'}}</div>
                </div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="stack-w">
                <div class="title">
                  <span>垛号信息</span>  
                  <div class="button" :class="barCode ? 'default':''" @click="changeBarCodeShow">
                    <span>垛号</span>
                    <span v-if="barCodeShow">{{barCode || '请点击输入'}}</span>
                    <span v-else>
                      <el-input
                        v-model="barCode"
                        placeholder="请输入垛号"
                        ref="barCodeInput"
                        style="width:120px;margin-top:-10px;"
                        @keyup.enter.native="barCodeEnter()"
                      ></el-input>
                    </span>
                  </div>
                </div>

                <div class="stack">
                  <el-table
                    :data="stackList"
                    :row-style="tableRowStyle"
                    :header-cell-style="tableHeaderColor"
                    :row-class-name="tableCurrentRowStyle"
                    highlight-current-row
                    style="width: 100%;font-size:26px;overflow:auto;"
                    height="4.5rem"
                  >
                    <el-table-column prop="MaterielName" label="物料名称" align="center"></el-table-column>
                    <el-table-column
                      prop="MaterielClassName"
                      label="物料类型"
                      width="100"
                      align="center"
                    ></el-table-column>
                    <el-table-column prop="StockCount" label="数量" width="100" align="center">
                      <template
                        slot-scope="scope"
                      >{{scope.row.StockCount}}({{scope.row.StockUnitName}})</template>
                    </el-table-column>
                    <el-table-column prop="StockStr10" label="重量" width="100" align="center">
                      <template slot-scope="scope">{{scope.row.StockStr10}}(克)</template>
                    </el-table-column>
                  </el-table>
                </div>
              </div>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </div>

    <div class="dialogBox-w" v-show="dialogShow">
      <div class="dialogBox">
        <div class="close">
          <div class="el-icon-circle-close icon" @click="dialogShow=false" />
        </div>
        <div class="info-w" @mousedown="getFocus()">
          <div class="top">
            <div class="title">{{matterInfo.MaterielsName || '物料名称'}}</div>
            <el-radio v-model="radio" :label="1" @change="$refs.weightInput.focus()">单匹</el-radio>
            <!-- <el-radio v-model="radio" :label="2" @change="$refs.weightInput.focus()">统计多匹</el-radio> -->
            <el-radio v-model="radio" :label="3" @change="$refs.weightInput.focus()">流水多匹</el-radio>
          </div>
          <div class="line">
            <div class="row">
              <div class="tit">料号：</div>
              <div class="des">{{matterInfo.MaterielsDetailCode}}</div>
            </div>
            <div class="row">
              <div class="tit">客户料号：</div>
              <div class="des">{{matterInfo.CustomerBomID}}</div>
            </div>
            <div class="row">
              <div class="tit">色号：</div>
              <div class="des">{{matterInfo.BomColorName}}</div>
            </div>
          </div>
          <div class="line">
            <div class="row">
              <div class="tit">成分：</div>
              <div class="des">{{matterInfo.MaterielComponent}}</div>
            </div>
            <div class="row">
              <div class="tit">门幅：</div>
              <div class="des">{{matterInfo.BomSpecName}}</div>
            </div>
            <div class="row">
              <div class="tit">克重：</div>
              <div class="des">{{matterInfo.MaterielWeight}}G/M2</div>
            </div>
          </div>
          <div class="line">
            <div class="row width100" v-if="radio === 3">
              <div class="ftit">请称重：</div>
              <el-input
                v-model="onceWeight"
                ref="weightInput"
                placeholder="请称重"
                style="width:140px"
                @keyup.enter.native="weightEnter()"
              ></el-input>
              <div class="unit">克</div>
              <div class="ftit">总重：{{weight}}</div>
              <div class="ftit" style="margin-left:1rem;">总匹数：{{totalPiece}}</div>
            </div>
            <div class="row width100" v-else>
              <div class="ftit">请称重：</div>
              <el-input
                v-model="weight"
                ref="weightInput"
                placeholder="请称重"
                style="width:140px"
                @keyup.enter.native="makeSure()"
              ></el-input>
              <div class="unit">克</div>
            </div>

            <!-- <div class="row width50">
              <div class="tit">匹数：</div>
              <div class="des" v-if="radio == 1">{{pieceCount}}</div>
              <el-input v-model="pieceCount" v-else placeholder="匹数" style="width:140px"></el-input>
              <div class="unit">匹</div>
            </div>-->
          </div>
          <div class="send-w">
            <div v-if="radio === 3" class="button" @click="cancleSure()">撤销称重</div>
            <div class="button" @click="dialogShow = false">关闭</div>
            <div class="button" @click="makeSure()">确定</div>
          </div>
        </div>
      </div>
    </div>

    <div v-if="dialogVisible" class="menuModalBox">
      <dialogchangj
        :instoreType="params.instoreType"
        :instoreurl="params.instoreurl"
      ></dialogchangj>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import dialogchangj from '@/components/dialogchangj' // 厂家弹出框
import Mixin from '@/components/mixin' // 混入
import {getMatterDetailList, getflStockList, getProductStockListByBarCode, inmlStorage, getKCNumber, getFabricInmlStockDesign, getStockInfoByFlnkID} from '@/api/instorage' // 接口

export default {
  name: 'fzml',
  data () {
    return {
      stockList: [],
      detailList: [],
      matterInfo: '',
      pieceCount: 1, // 匹数
      weight: '', // 重量
      cylinderNo: '', // 缸号
      barCode: '', // 垛号
      setInterval: null,
      selStockFlnkID: '',
      dialogShow: false,
      radio: 1,
      dialogVisible: false,
      params: {
        instoreType: '',
        titlename: '',
        instoreurl: ''
      },
      selDetail: '',
      barCodeShow: true,
      onceWeight: '',
      inStoraging: false,
      stackList: [],
      materielType: '',
      isInStock: false,
      totalPiece: 0,
      weightArrar: []
    }
  },
  computed: {
    ...mapState({
      orderItem: (state) => state.dialogchangj.orderItem
    })
  },
  mixins: [Mixin],
  watch: {
    orderItem: {
      // 表格数据刷新后需清空之前查看的订单详情内容
      handler: function (newVal, oldVal) {
        let vm = this
        vm.getMatterDetailList()
      },
      deep: true
    },
    dialogShow (newVal, oldVal) {
      let vm = this
      if (newVal === true) {
        vm.$nextTick(() => {
          vm.$refs.weightInput.focus()
        })
      }
    }
  },
  components: {
    dialogchangj: dialogchangj
  },
  methods: {
    // 修改table tr行的背景色
    tableRowStyle ({ row, rowIndex }) {
      return {
        backgroundColor: 'rgb(0, 63, 140)',
        color: '#fff',
        fontWeight: 'bold',
        height: '0.7rem',
        fontSize: '15px'
      }
    },
    tableCurrentRowStyle ({ row, rowIndex }) {
      let vm = this
      if (vm.isInStock) {
        if (rowIndex === 0) {
          return 'warning-row'
        }
      } else {
        return 'normal-row'
      }
    },
    // 修改table header的背景色
    tableHeaderColor ({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return 'background-color: rgb(0, 63, 140);color: #fff;font-weight: bold;height:0.7rem;font-size:15px'
      }
    },
    // 根据款式物料读取入库物料明细列表
    getMatterDetailList () {
      let vm = this
      let params = new FormData()
      params.append('CustomerFlnkID', vm.orderItem.CustomFlnkID)
      params.append('OrderOuterCode', vm.orderItem.OrderOuterCode)
      params.append('StyleFlnkID', vm.orderItem.StyleFlnkID)
      params.append('MaterielTypeCode', vm.materielType.slice(0, 1))
      getMatterDetailList(params).then((response) => {
        if (response.data.data) {
          vm.detailList = response.data.data
        }
      })
    },
    getFocus () {
      let vm = this
      if (vm.dialogShow) {
        vm.$nextTick(() => {
          vm.$refs.weightInput.focus()
        })
      } else {
        if (!vm.barCodeShow) {
          vm.$nextTick(() => {
            vm.$refs.barCodeInput.focus()
          })
        }
      }
    },
    // 读取今日最新面料入库列表
    getStockList () {
      let vm = this
      let params = new FormData()
      params.append('TopCount', 20)
      params.append('UserFlnkID', vm.getLocalStorage('UserFlnkID'))
      params.append('Type', vm.materielType.slice(0, 1))
      getflStockList(params).then((response) => {
        vm.stockList = response.data.data
      })
    },
    // 入库记账
    async InStorage () {
      let vm = this
      if (!vm.matterInfo) {
        vm.$message('请选择物料')
        return
      }
      if (!vm.weight) {
        vm.$message('请输入重量')
        return
      }
      if (!vm.cylinderNo) {
        vm.$message('请输入缸号/批号')
        return
      }
      if (vm.inStoraging) {
        vm.$message('请勿重复提交')
        return
      }
      await vm.getKCNumber()
      vm.inStoraging = true
      let params = {
        StockID: vm.stockID,
        CustomerFlnkID: vm.matterInfo.CustomerFlnkID,
        OrderOuterCode: vm.matterInfo.OrderOuterCode,
        StyleFlnkID: vm.matterInfo.StyleFlnkID,
        MSMainFlnkID: vm.matterInfo.MSMainFlnkID,
        MSDetailFlnkID: vm.matterInfo.MSDetailFlnkID,
        CylinderNo: vm.cylinderNo,
        MaterielWeight: vm.matterInfo.MaterielWeight,
        StockCount: vm.weight,
        StockUnitFlnkID: vm.matterInfo.UnitID,
        WarehouseFlnkID: vm.warehouseFormat(vm.materielType.slice(0, 1)),
        CustomerBomID: vm.matterInfo.CustomerBomID,
        PieceCount: vm.radio === 1 ? vm.pieceCount : vm.totalPiece,
        BarCode: vm.barCode,
        OrgID: vm.getLocalStorage('OrgID'),
        OperFlnkID: vm.getLocalStorage('UserFlnkID')
      }
      inmlStorage(params).then((response) => {
        if (response.data.result) {
          vm.getStockList()
          vm.getProductStockListByBarCode()
          vm.$message('入库成功')
          vm.selStockFlnkID = response.data.StockFlnkID
          vm.isInStock = true
          vm.weight = ''
          vm.totalPiece = 0
          vm.radio = 1
          vm.print()
        } else {
          vm.$message(response.data.error)
        }
        vm.inStoraging = false
      })
    },
    // 作废
    cancelStock () {
      alert('作废')
    },
    // 读取入库单
    async getKCNumber () {
      let vm = this
      let params = {
        ShortName: 'ML'
      }
      await getKCNumber(params).then((response) => {
        if (response.data) {
          vm.stockID = response.data
        }
      })
    },
    // 读取面料入库明细的存货标签列表
    getFabricInStockDesign () {
      let vm = this
      let params = new FormData()
      params.append('StockFlnkID', vm.selStockFlnkID)
      getFabricInmlStockDesign(params).then((response) => {
        if (vm.isAndroid()) {
          window.android.print(vm.materielType.slice(0, 1), JSON.stringify(response.data.data))
        } else {
          vm.$message(JSON.stringify(response.data.data))
        }
      })
    },
    // 公共接口-根据存货表的FLnkID读取库存记录
    getStockInfoByFlnkID () {
      let vm = this
      let params = new FormData()
      params.append('StockFlnkID', vm.selStockFlnkID)
      getStockInfoByFlnkID(params).then((response) => {
        if (response.data.result) {
          vm.matterInfo = {
            MaterielsDetailCode: response.data.data.MaterielFullCode,
            CustomerBomID: response.data.data.StockStr2,
            MaterielsName: response.data.data.MaterielName,
            BomColorName: response.data.data.ColorConfigName,
            MaterielComponent: response.data.data.MaterielComponent,
            BomSpecName: response.data.data.SpecConfigName,
            UnitName: response.data.data.StockUnitName,
            MaterielWeight: response.data.data.StockInt2
          }
          vm.weight = response.data.data.StockCount
          vm.pieceCount = response.data.data.StockInt1
          vm.cylinderNo = response.data.data.StockStr1
        }
      })
    },
    // 单击表格某一行
    rowClick (row) {
      let vm = this
      vm.stockID = row.StockID
      vm.selStockFlnkID = row.FlnkID
      vm.isInStock = false
      vm.selDetail = ''
      vm.getStockInfoByFlnkID()
    },
    // 打印标签
    print () {
      let vm = this
      if (vm.selStockFlnkID) {
        vm.getFabricInStockDesign()
      }
    },
    customerToFzml () {
      let vm = this
      vm.params = {
        instoreType: vm.$route.query.type,
        instoreurl: '/instorage/fzml'
      }
      vm.dialogVisible = true
    },
    getWindowClose: function () {
      let vm = this
      vm.dialogVisible = false
    },
    selectDetail (item) {
      let vm = this
      if (item) {
        vm.selDetail = item.FlnkID
        vm.matterInfo = item
        vm.isInStock = false
      }
      vm.dialogShow = true
      vm.totalPiece = 0
      vm.onceWeight = ''
      vm.weight = ''
      vm.weightArrar = []
    },
    weightEnter () {
      let vm = this
      try {
        if (!(parseFloat(vm.onceWeight).toString() === 'NaN')) {
          vm.weight = (Number(vm.weight) + Number(vm.onceWeight)).toFixed(1)
          vm.weightArrar.push(vm.onceWeight)
          vm.onceWeight = ''
          if (vm.radio === 3) {
            vm.totalPiece++
          }
          vm.$refs.weightInput.focus()
        } else {
          vm.$message('称重错误')
        }
      } catch (e) {
        vm.$message('称重错误')
      }
    },
    makeSure () {
      let vm = this
      try {
        if (!(parseFloat(vm.weight).toString() === 'NaN')) {
          if (vm.weight) {
            vm.dialogShow = false
            vm.radio === 1
          ? vm.$refs.cylinderNoInput.focus()
          : vm.$refs.piceCountInput.focus()
          } else {
            vm.$message('请称重')
          }
        } else {
          vm.$message('称重错误')
        }
      } catch (e) {
        vm.$message('称重错误')
      }
    },
    cancleSure () {
      let vm = this
      if (vm.weightArrar.length > 0) {
        vm.weightArrar.pop()
        vm.weight = 0
        vm.totalPiece--
        vm.weightArrar.forEach(elemet => {
          vm.weight = (Number(vm.weight) + Number(elemet)).toFixed(1)
        })
      } else {
        vm.weight = ''
      }
    },
    changeBarCodeShow () {
      let vm = this
      vm.barCodeShow = false
      vm.barCode = ''
      vm.$nextTick(() => {
        vm.$refs.barCodeInput.focus()
      })
    },
    barCodeEnter () {
      let vm = this
      vm.getProductStockListByBarCode()
      vm.barCodeShow = true
    },
    makePiceCountSure () {
      let vm = this
      vm.$refs.cylinderNoInput.focus()
    },
    // 公共接口-根据垛号读取库存记录列表
    getProductStockListByBarCode () {
      let vm = this
      let params = new FormData()
      params.append('BarCode', vm.barCode)
      getProductStockListByBarCode(params).then((response) => {
        if (response.data.result) {
          vm.stackList = response.data.data
        } else {
          vm.$message(response.data.error)
        }
      })
    }
  },
  mounted () {
    let vm = this
    vm.setInterval = setInterval(() => {
      if (vm.getLocalStorage('UserFlnkID')) {
        vm.getStockList()
        clearInterval(vm.setInterval)
        vm.setInterval = null
      }
    }, 1000)
    setTimeout(() => {
      vm.getMatterDetailList()
    }, 0)
    vm.materielType = vm.$route.query.type
  },
  beforeDestroy: function () {}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import "~@/css/instorage/fzml.scss";
</style>
<style lang="scss">
.info-w,
.stack-w {
  .el-input__inner {
    background: #002752;
    color: #fff;
  }
  .el-radio__inner {
    width: 20px;
    height: 20px;
    &::after {
      width: 5px;
      height: 5px;
    }
  }
  .el-radio__label {
    color: #fff;
    font-size: 28px;
  }
}
.el-table .warning-row {
	background: #002752 !important;
}
.el-table .normal-row{
    background: rgb(0, 63, 140) !important;
}
.el-table::before {
    height: 0px;
 }
</style>
